<template>
  <el-form
    ref="ruleFormRef"
    :model="kpForm"
    :rules="rules"
    class="demo-ruleForm"
    label-position="right"
    size="small"
  >
    <el-form-item
      :label="t('ptl.direction')"
      prop="direction"
      :placeholder="t('ptl.direction')"
    >
      <el-radio-group v-model="kpForm.direction">
        <el-tooltip content="Send">
          <el-radio label=">">
            >
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Response">
          <el-radio label="<">
            &lt;
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.address')"
      prop="address"
      :placeholder="t('ptl.address')"
      @keyup.enter="submitForm(ruleFormRef)"
    >
      <el-input v-model="kpForm.address" />
    </el-form-item>

    <el-form-item
      :label="t('ptl.confirmStatus')"
      prop="confirmStatus"
      :placeholder="t('ptl.confirmStatus')"
    >
      <el-radio-group v-model="kpForm.confirmStatus">
        <el-tooltip content="Short pressed">
          <el-radio label="C">
            C
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Not pressed">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Long pressed">
          <el-radio label="L">
            L
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.minusStatus')"
      prop="minusStatus"
      :placeholder="t('ptl.minusStatus')"
    >
      <el-radio-group v-model="kpForm.minusStatus">
        <el-tooltip content="Short pressed">
          <el-radio label="M">
            M
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Not pressed">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.plusStatus')"
      prop="plusStatus"
      :placeholder="t('ptl.plusStatus')"
    >
      <el-radio-group v-model="kpForm.plusStatus">
        <el-tooltip content="Short pressed">
          <el-radio label="P">
            P
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Not pressed">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.menuStatus')"
      prop="menuStatus"
      :placeholder="t('ptl.menuStatus')"
    >
      <el-radio-group v-model="kpForm.menuStatus">
        <el-tooltip content="Short pressed">
          <el-radio label="E">
            E
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Not pressed">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.external1Status')"
      prop="external1Status"
      :placeholder="t('ptl.external1Status')"
    >
      <el-radio-group v-model="kpForm.external1Status">
        <el-tooltip content="Short pressed">
          <el-radio label="I">
            I
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Not pressed">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Long pressed">
          <el-radio label="L">
            L
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.external2Status')"
      prop="external2Status"
      :placeholder="t('ptl.external2Status')"
    >
      <el-radio-group v-model="kpForm.external2Status">
        <el-tooltip content="Short pressed">
          <el-radio label="J">
            J
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Not pressed">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Long pressed">
          <el-radio label="L">
            L
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.data')"
      prop="data"
      :placeholder="t('ptl.data')"
      @keyup.enter="submitForm(ruleFormRef)"
    >
      <el-input v-model="kpForm.data" />
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        @click="submitForm(ruleFormRef)"
        :disabled="!ptlServerStatus"
        :loading="loading"
      >
        {{ t('ptl.send') }}
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">
        {{ t('ptl.reset') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { sendMessageByServer } from '@/api/ptl'
import { ptlStore } from '@/store/ptlStore'
import { storeToRefs } from 'pinia'
import { KpMessage } from '@/types/ptl/KP'

const store = ptlStore()

const loading = ref(false)

const { ptlServerStatus } = storeToRefs(store) // 连接状态

const { t } = useI18n()
const ruleFormRef = ref<FormInstance>()

const kpForm: KpMessage = reactive({
  direction: '>',
  address: '*******',
  messageType: '',
  confirmStatus: 'N',
  minusStatus: 'N',
  plusStatus: 'N',
  menuStatus: 'N',
  external1Status: 'N',
  external2Status: 'N',
  data: '1'
})

const rules = reactive<FormRules>({
  direction: [
    {
      required: true,
      message: '请填写发送方向',
      trigger: 'blur',
    },
  ],
  address: [
    {
      required: true,
      message: '请填写目标地址',
      trigger: 'blur',
    },
    { min: 7, max: 7, message: '长度必须是7', trigger: 'blur' }
  ],
  data: [
    {
      required: true,
      message: '请填写显示的值',
      trigger: 'blur',
    },
  ]
})

/**
 * 提交表单
 * @param formEl
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true

      if (kpForm.direction === '>') {
        kpForm.messageType = 'KP'
      } else {
        kpForm.messageType = 'kp'
      }

      sendMessageByServer(kpForm)
        .then((res) => {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'success',
            duration: 1000,
          })
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

/**
 * 重置表单
 * @param formEl
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>
